<template>
  <div class="detail">
    <div class="title">
      <span>详情查看</span>
      <el-icon color="#3d3d3d" :size="20" class="btn" @click.stop="handleClick">
        <CircleCloseFilled />
      </el-icon>
    </div>
    <div class="row">
      <div class="label">生产订单：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.productionOrderNo"
        :disabled="!dataMsg.productionOrderNo"
        placement="right"
      >
        <div class="value">{{ dataMsg.productionOrderNo }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">项目编号：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.projectCode"
        :disabled="!dataMsg.projectCode"
        placement="right"
      >
        <div class="value">{{ dataMsg.projectCode }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">内部订单：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.sellOrderNo"
        :disabled="!dataMsg.sellOrderNo"
        placement="right"
      >
        <div class="value">{{ dataMsg.sellOrderNo }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">存货编码：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.productCode"
        :disabled="!dataMsg.productCode"
        placement="right"
      >
        <div class="value">{{ dataMsg.productCode }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">存货名称：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.productName"
        :disabled="!dataMsg.productName"
        placement="right"
      >
        <div class="value">{{ dataMsg.productName }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">规格：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.specification"
        :disabled="!dataMsg.specification"
        placement="right"
      >
        <div class="value">{{ dataMsg.specification }}</div>
      </el-tooltip>
    </div>
    <div class="row">
      <div class="label">派工数：</div>
      <el-tooltip
        effect="light"
        trigger="click"
        :content="dataMsg.num + ''"
        :disabled="!dataMsg.num"
        placement="right"
      >
        <div class="value">{{ dataMsg.num }}</div>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
defineProps({
  dataMsg: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['close'])

const handleClick = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.detail {
  position: absolute;
  right: calc(-180px - 2px);
  top: 0px;
  width: 180px;
  border-radius: 2px;
  box-shadow: 0 0 8px #ccc;
  background-color: #fff;
  padding: 5px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    .btn {
      cursor: pointer;
    }
  }
  .row {
    display: flex;
    margin-top: 5px;
    .label {
      width: 75px;
    }
    .value {
      cursor: pointer;
      width: calc(180px - 75px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
